<template>
  <div style="background-size: cover;" :style="{backgroundImage : 'url(' + imgUrl + ')'}">
    <dv-border-box-7  class="bg">
    <div style="width: 19%;margin: 0 1% 0 0;height: 100%;float: left;border-radius: 15px">
<!--      <Scroll class="scroll" />-->
        <div  class="scroll" >
          <dv-border-box2>
            <div class="box-title" style="background-color: rgba(255, 255, 255, .6);">
              捐赠信息
            </div>
            <dv-scroll-board :config="config" style="
            color: black;
            font-family: youyuan;
            font-weight: bold;
            height: 85%"
            />
          </dv-border-box2>
        </div>


      <div style="height: 4%"></div>

        <div class="scroll2">
          <dv-border-box2>
            <div class="box-title"></div>
            <v-chart id="myChart3" ref="chart3" style="height: 80%;width: 100%" :option="option2"></v-chart>
          </dv-border-box2>
        </div>

    </div>
    <div style="width: 19%;height: 100%;float: right;margin: 0 0 0 1%;border-radius: 15px">
      <div  class="scroll" >
        <dv-border-box2>
          <div class="box-title"></div>
          <dv-capsule-chart :config="config2" style="width:100%;height:80%;color: black"  />
        </dv-border-box2>
      </div>


      <div style="height: 4%"></div>

      <div class="scroll2">
        <dv-border-box2>
          <div class="box-title"></div>
          <v-chart id="myChart4" ref="chart4" style="height: 80%;width: 100%" :option="option2"></v-chart>
        </dv-border-box2>
      </div>
    </div>
    <div class="map">
      <dv-border-box-6 style="padding: 5px">
        <Map style="border-radius: 15px" />
      </dv-border-box-6>
    </div>
    <div class="bar">
      <div class="left-bar">
        <v-chart id="myChart1" ref="chart1" style="height: 100%;width: 100%" :option="option"></v-chart>
      </div>
      <div class="right-bar">
        <v-chart id="myChart2" ref="chart2" :option="option" style="height: 100%;width: 100%"></v-chart>
      </div>
    </div>
    </dv-border-box-7>
  </div>
</template>

<script>
import Map from "@/views/map.vue";
import * as url from "url";
import { getLongitudeLatitude } from "@/utils/position/location"

export default {
  computed: {
    url() {
      return url
    }
  },
  components: {
    Map,
  },

  mounted() {
    this.getLocation()
    window.addEventListener("resize", this.handleResize);
    this.handleResize();
  }
  ,
  data() {
    return {
      imgUrl : require('@/assets/images/bg.png'),
      location: {
        lat: '',
        lng: ''
      },
      config2: {
        data: [
          {
            name: '南阳',
            value: 167
          },
          {
            name: '周口',
            value: 67
          },
          {
            name: '漯河',
            value: 123
          },
          {
            name: '郑州',
            value: 55
          },
          {
            name: '西峡',
            value: 98
          }
        ]
      },
      config: {
        waitTime: 1000,
        rowNum: 6,
        carousel: 'single',
        oddRowBGC: 'rgba(255, 255, 255, .5)',
        evenRowBGC: 'rgba(255, 255, 255, .6)',
        data: [
          ['张宇 在2085年6月29日 为德州市 捐了1元'],
          ['张宇 在2085年6月29日 为德州市 捐了1元'],
          ['张宇 在2085年6月29日 为德州市 捐了1元'],
          ['张宇 在2085年6月29日 为德州市 捐了1元'],
          ['张宇 在2085年6月29日 为德州市 捐了1元'],
          ['张宇 在2085年6月29日 为德州市 捐了1元'],
          ['张宇 在2085年6月29日 为德州市 捐了1元'],
          ['张宇 在2085年6月29日 为德州市 捐了1元'],
          ['张宇 在2085年6月29日 为德州市 捐了1元'],
          ['张宇 在2085年6月29日 为德州市 捐了1元'],
          ['张宇 在2085年6月29日 为德州市 捐了1元'],
          ['张宇 在2085年6月29日 为德州市 捐了1元'],
        ]
      },

      option: {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      },
      option2: {
        tooltip: {
          trigger: 'item'
        },
        // legend: {
        //   top: '5%',
        //   left: 'center'
        // },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 1048, name: 'Search Engine'},
              {value: 735, name: 'Direct'},
              {value: 580, name: 'Email'},
              {value: 484, name: 'Union Ads'},
              {value: 300, name: 'Video Ads'}
            ]
          }
        ]
      }
    }
  },
  methods: {
    handleResize() {
      // Resize ECharts charts
      this.$refs.chart1 && this.$refs.chart1.resize();
      this.$refs.chart2 && this.$refs.chart2.resize();
      this.$refs.chart3 && this.$refs.chart3.resize();
      this.$refs.chart4 && this.$refs.chart4.resize();
    },
    getLocation() {
      getLongitudeLatitude()
        .then((position) => {
          console.log(position); // 输出 { lat: 纬度, lng: 经度 }
          this.location.lat = position.lat
          this.location.lng = position.lng
          console.log(this.location.lat)
          console.log(this.location.lng)
        })
        .catch((error) => {
          console.error(error);
        });
    }
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResize);
  },
}
</script>

<style scoped>
.box-title {
  height: 50px;
  border-bottom: 1px solid;
  line-height: 50px;
  text-align: center;
  font-weight: 700;
  font-size: 20px;
}
.map {
  height: 60%;
  width: 60%;
  text-align: center;
  margin: 0 auto;
}
.bg {
  height: 90vh;
  background-color: aliceblue;
  padding: 1% 1%;
}

.bar {
  height: 38%;
  width: 60%;
  text-align: center;
  margin: 1% auto;
  //background-color: #8d8b9d;
  border-radius: 15px;
}

.left-bar {
  height: 100%;
  width: 50%;
  float: left;
}

.right-bar {
  height: 100%;
  width: 50%;
  float: right;
}

.scroll {
  width: 100%;
  height: 48%;
  //border-radius: 15px;
  background-color: rgba(240, 248, 255, .5);
}

.scroll2 {
  width: 100%;
  height: 48%;
  background-color: #F0F8FF;
  background-color: rgba(240, 248, 255, .5);
}
</style>


